<template>

  <div class="app-container">
    <el-form :inline="true" :model="roomCondition" class="demo-form-inline">
      <el-form-item label="小区名">
        <el-input v-model="roomCondition.quartersName" placeholder="请输入小区名称"></el-input>
      </el-form-item>


      <el-form-item label="业主">
        <el-input v-model="roomCondition.ownerName" placeholder="请输入业主姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchRoom()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="roomList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="70">
      </el-table-column>
      <el-table-column
        prop="quarters.name"
        label="小区名"
        width="120">
      </el-table-column>

      <el-table-column
        prop="owner.ownerName"
        label="业主">
      </el-table-column>
      <el-table-column
        prop="owner.phone"
        label="业主电话">
      </el-table-column>

      <el-table-column
        prop="rent"
        label="租金">
      </el-table-column>

      <el-table-column
        prop="type"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">整租</span>
          <span v-if="scope.row.type == 2">合租</span>

        </template>
      </el-table-column>

      <el-table-column
        prop="rent"
        label="图片">
        <template slot-scope="scope">
          <img v-if="scope.row.img" style="width:80px;height: 80px;border-radius: 50%"
               :src="'http://139.224.186.148:10001/imgs/room/roomImgs/'+scope.row.img"
               @click="showImgs(scope.row.id)"
          />
          <img v-else style="width:80px;height: 80px;border-radius: 50%"
               src="http://139.224.186.148:10001/imgs/default.jpg"
               @click="showImgs(scope.row.id)"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="startTime"
        label="签约开始时间">
      </el-table-column>

      <el-table-column
        prop="endTime"
        label="签约结束时间">
      </el-table-column>

      <el-table-column
        label="操作"
        width="160"
        align="center"
      >
        <template slot-scope="scope">

          <el-button
            type="waring" round
            size="small"
            @click="openEdit(scope.row.id,scope.row.rent,scope.row.type)"
          >
            修改
          </el-button>

          <router-link :to="'/room/edit/'+scope.row.id">
            <el-button
              type="success" round
              size="small"
            >
              详细
            </el-button>
          </router-link>
        </template>
      </el-table-column>


    </el-table>

    <div class="block">

      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2,4,6,8]"
        :page-size="size"
        :total="total"
        :current-page.sync="num">
      </el-pagination>
    </div>


    <!--edit-->
    <el-dialog
      title="修改"
      :visible.sync="editDialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="租金">
          <el-input v-model="editForm.rent"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editForm.type">
            <el-option label="整租" :value="1"></el-option>
            <el-option label="合租" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editRoom()">确 定</el-button>
  </span>
    </el-dialog>


    <!-- Form -->
    <el-dialog title="房屋图片" :visible.sync="imgDialogFormVisible">

      <div ref="imgsBox" v-for=" (i,index) in imgList" class="imgsBox" :key="index">
        <img style="width:80px;height: 80px;border-radius: 50%"
             :src="'http://139.224.186.148:10001/imgs/room/roomImgs/'+i.path"/>
        <el-button v-if="isDelImgsBtn" @click="doDelImgs(i.id,this)" class="delImgBtn" size="mini" type="danger"
                   icon="el-icon-close" circle></el-button>
      </div>
      <div style="height: 20px; clear:right">

      </div>
      <div slot="footer" class="dialog-footer" style="clear:right">
        <el-button type="primary" @click="imgAddDialogFormVisible=true,imgDialogFormVisible = false">添加图片</el-button>
        <el-button type="danger" v-if="!isDelImgsBtn" @click="isDelImgsBtn = true">删除图片</el-button>
        <el-button type="primary" v-if="isDelImgsBtn" @click="isDelImgsBtn = false">取消删除</el-button>
        <el-button @click="imgDialogFormVisible = false,isDelImgsBtn=false">取 消</el-button>

      </div>
    </el-dialog>


    <el-dialog title="添加房屋图片" :visible.sync="imgAddDialogFormVisible">
      <div>
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="`http://localhost:8087/uploadRoomImgs?roomId=${roomId}&filePath=room/roomImgs`"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          list-type="picture">
          <el-button size="small" type="primary">选取图片</el-button>

          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

        </el-upload>
      </div>

      <div slot="footer" class="dialog-footer" style="clear:right">
        <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
        <el-button @click="imgAddDialogFormVisible = false">取 消</el-button>

      </div>
    </el-dialog>

  </div>
</template>


<script>
import Room from '@/api/room.js'

export default {
  name: "list",
  data() {
    return {
      editForm: {
        id: '',
        rent: '',
        type: ''
      },
      editDialogVisible: false,
      roomId: 0,
      fileList: [],
      imgAddDialogFormVisible: false,
      isDelImgsBtn: false,
      imgDialogFormVisible: false,
      num: 1,
      size: 2,
      total: 0,
      roomList: [],
      imgList: [],
      roomCondition: {
        quartersName: '',
        ownerName: ''
      }

    }
  },
  created() {
    this.initRoom();
  },
  methods: {
    openEdit(id, rent, type) {
      this.editForm.id = id
      this.editForm.rent = rent;
      this.editForm.type = type


      this.editDialogVisible = true
    },
    editRoom() {
      console.log(this.editForm)
      Room.edit(this.editForm).then(res => {
        this.initRoom()
        this.editDialogVisible = false
      })

    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    doDelImgs(imgId, obj) {
      Room.delImg(imgId).then(res => {
        this.imgDialogFormVisible = false
        this.showImgs(this.roomId)
        this.imgDialogFormVisible = true

      })

      // this.roomList.splice(this.$refs.imgsBox[index], 1)
      // 点击调用删除方法，在datahistory数组里删除index这个下标项，逗号后面的1就代表删除当前的1项
    },
    showImgs(id) {
      Room.getImgs(id).then(res => {
        const {data} = res
        this.imgList = data.imgList
      })
      this.roomId = id
      this.imgDialogFormVisible = true
      console.log(this.imgList)


    },
    handleCurrentChange(num) {
      this.num = num
      this.initRoom()
    },
    handleSizeChange(size) {
      this.num = 1
      this.size = size
      this.initRoom()

    },
    searchRoom() {
      console.log(this.roomCondition)
      this.initRoom();
    },
    initRoom() {
      console.log("initRoom")
      Room.getList(this.num, this.size, this.roomCondition)
        .then(res => {
          const {data} = res;
          this.roomList = data.roomList.list
          this.num = data.roomList.pageNum;
          this.size = data.roomList.pageSize;
          this.total = data.roomList.total;
        })
    }
  }
}
</script>

<style scoped>

.imgsBox {
  position: relative;
  float: left;
  margin-right: 20px;
}

.delImgBtn {
  position: absolute;
  left: 60px;


}


</style>
